<template>
    <div id="home_info">
        <div class="container navtab_box">
            <ul class="clearflx navtab">
                <!--<li class="navtab_list" :class="{navtab_list_on:nav==0}" @click="nav=0">国内展会</li>-->
                <li class="navtab_list" :class="{navtab_list_on:nav==0}" @click="getInland">国内展会</li>
                <li class="navtab_list" :class="{navtab_list_on:nav==1}" @click="getOutland">国外展会</li>
                <li class="navtab_list" :class="{navtab_list_on:nav==2}" @click="getIndustry">行业展会</li>
                <li class="navtab_list" :class="{navtab_list_on:nav==3}" @click="getNewest">最新展会</li>
                <li class="navtab_list" :class="{navtab_list_on:nav==4}" @click="getHot">热门展会</li>
            </ul>
            <router-link to="#">
                <span class="more_info">>>展会信息频道</span>
            </router-link>
        </div>
        <div class="container clearflx">
            <ul class="info_content clearflx">
                <li class="info_content_list" v-for="item in tradeshows">
                    <div class="info_content_listTop clearflx">
                        <div class="info_content_listTop_left">
                            <!--<img src="../../assets/home_infolist.jpg" alt/>-->
                            <img :src="item.thumb" alt/>
                        </div>
                        <p class="info_content_listTop_right">{{item.name}}</p>
                    </div>
                    <div class="info_content_listBottom">
                        <!--<div class="info_content_listBottom_time">2019/5/1</div>-->
                        <div class="info_content_listBottom_time">{{item.startTime}}</div>
                       <!-- <div class="info_content_listBottom_address">中国国际展览中心-新馆</div>-->
                       <div class="info_content_listBottom_address">{{item.exhibitionhallName}}</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import {getTradeshowsInland,getTradeshowsOutland,getTradeshowsIndustry,getTradeshowsNewest,getTradeshowsHot} from "../../api/home";

    export default {
        data() {
            return {
                nav: 0,
                tradeshows:[],
                tradeservices:[]
            };
        },
        methods: {
            getInland() {
                this.nav = 0;
                getTradeshowsInland().then(res => {
                    this.tradeshows = res.data.data;
                })
            },
            getOutland() {
                this.nav = 1;
                getTradeshowsOutland().then(res => {
                    this.tradeshows = res.data.data;
                })
            },
            getIndustry() {
                this.nav = 2;
                getTradeshowsIndustry().then(res => {
                    this.tradeshows = res.data.data;
                })
            },
            getNewest() {
                this.nav = 3;
                getTradeshowsNewest().then(res => {
                    this.tradeshows = res.data.data;
                })
            },
            getHot() {
                this.nav = 4;
                getTradeshowsHot().then(res => {
                    this.tradeservices = res.data.data;
                })
            },
        },
        mounted() {
            getTradeshowsInland().then(res => {
                this.tradeshows = res.data.data;
            })
        }
    };
</script>
<style lang="scss" scoped>
    .navtab_box {
        // padding-left: 20px;
        border-bottom: 1px solid #c81622;
        overflow: hidden;

        .navtab {
            float: left;

            .navtab_list {
                margin-right: 32px;
                padding: 0 6px;
                color: #a8a8a8;
                float: left;
                font-size: 20px;
                line-height: 40px;
            }

            .navtab_list:hover {
                color: #fff;
                background-color: #c81622;
                cursor: pointer;
            }

            .navtab_list_on {
                color: #fff;
                background-color: #c81622;
            }
        }

        .more_info {
            float: right;
            color: #c81622;
            margin-right: 50px;
            font-size: 14px;
            display: block;
            margin-top: 20px;
            cursor: pointer;
        }
    }

    .info_content {
        padding: 10px 0;

        .info_content_list {
            margin: 9px;
            width: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            float: left;

            .info_content_listTop {
                .info_content_listTop_left {
                    float: left;
                    width: 78px;
                    padding: 0 10px;
                    // margin-bottom: 10px;
                    > img {
                        border: 1px solid #ccc;
                        width: 100%;
                    }
                }

                .info_content_listTop_right {
                    float: right;
                    width: 100px;
                    text-align: justify;
                    font-size: 15px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    color: #c81622;
                    cursor: pointer;
                }
            }

            .info_content_listBottom {
                margin-left: 10px;
                text-align: left;
                font-size: 13px;
                color: #a8a8a8;
                line-height: 28px;

                .info_content_listBottom_time {
                    position: relative;
                    padding-left: 24px;
                }

                .info_content_listBottom_time::before {
                    content: "";
                    display: block;
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    top: 4px;
                    left: 0;
                    background-image: url("../../assets/home_time.jpg");
                    background-repeat: no-repeat;
                    background-size: 100%;
                }

                .info_content_listBottom_address {
                    padding-left: 24px;
                    position: relative;
                }

                .info_content_listBottom_address::before {
                    content: "";
                    display: block;
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    top: 6px;
                    left: 0;
                    background-image: url("../../assets/home_home.jpg");
                    background-repeat: no-repeat;
                    background-size: 100%;
                }
            }
        }
    }
</style>